---
title: "Border Radius"
description: "Utilities for controlling the border radius of an element."
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/borderRadius'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Rounded corners

Use utilities like `.rounded-sm`, `.rounded`, or `.rounded-lg` to apply different border radius sizes to an element.

```html lightBlue
<template preview>
  <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
    <div class="p-6 bg-light-blue-500 text-white text-center font-extrabold flex items-center justify-center rounded-sm">.rounded-sm</div>
    <div class="p-6 bg-light-blue-500 text-white text-center font-extrabold flex items-center justify-center rounded">.rounded</div>
    <div class="p-6 bg-light-blue-500 text-white text-center font-extrabold flex items-center justify-center rounded-md">.rounded-md</div>
    <div class="p-6 bg-light-blue-500 text-white text-center font-extrabold flex items-center justify-center rounded-lg">.rounded-lg</div>
  </div>
</template>

<div class="**rounded-sm** ..."></div>
<div class="**rounded** ..."></div>
<div class="**rounded-md** ..."></div>
<div class="**rounded-lg** ..."></div>
```

## Pills and circles

Use the `rounded-full` utility to create pills and circles.

```html indigo
<template preview>
  <div class="flex justify-center items-center space-x-6">
    <div class="bg-indigo-500 px-6 py-3 text-white text-center font-extrabold rounded-full">Pill Shape</div>
    <div class="bg-indigo-500 h-24 w-24 text-white text-center font-extrabold flex items-center justify-center rounded-full">Circle</div>
  </div>
</template>

<div class="**rounded-full** py-3 px-6...">Pill Shape</div>
<div class="**rounded-full** h-24 w-24 flex items-center justify-center...">Circle</div>
```

## No rounding

Use `rounded-none` to remove an existing border radius from an element.

This is most commonly used to remove a border radius that was applied at a smaller breakpoint.

```html rose
<template preview>
  <div class="flex justify-center items-center">
    <div class="bg-rose-500 p-6 text-white text-center font-extrabold rounded-none">.rounded-none</div>
  </div>
</template>

<div class="**rounded-none** ...">.rounded-none</div>
```

## Rounding sides separately

Use `rounded-{t|r|b|l}{-size?}` to only round one side of an element.

```html emerald
<template preview>
  <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
    <div class="bg-emerald-500 p-6 text-white text-center font-extrabold rounded-t-lg">.rounded-t-lg</div>
    <div class="bg-emerald-500 p-6 text-white text-center font-extrabold rounded-r-lg">.rounded-r-lg</div>
    <div class="bg-emerald-500 p-6 text-white text-center font-extrabold rounded-b-lg">.rounded-b-lg</div>
    <div class="bg-emerald-500 p-6 text-white text-center font-extrabold rounded-l-lg">.rounded-l-lg</div>
  </div>
</template>

<div class="**rounded-t-lg** ...">.rounded-t-lg</div>
<div class="**rounded-r-lg** ...">.rounded-r-lg</div>
<div class="**rounded-b-lg** ...">.rounded-b-lg</div>
<div class="**rounded-l-lg** ...">.rounded-l-lg</div>
```

## Rounding corners separately

Use `rounded-{tl|tr|br|bl}{-size?}` to only round one corner an element.

```html amber
<template preview>
  <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
    <div class="bg-amber-500 p-6 text-white text-center font-extrabold rounded-tl-lg">.rounded-tl-lg</div>
    <div class="bg-amber-500 p-6 text-white text-center font-extrabold rounded-tr-lg">.rounded-tr-lg</div>
    <div class="bg-amber-500 p-6 text-white text-center font-extrabold rounded-br-lg">.rounded-br-lg</div>
    <div class="bg-amber-500 p-6 text-white text-center font-extrabold rounded-bl-lg">.rounded-bl-lg</div>
  </div>
</template>

<div class="**rounded-tl-lg** ..."></div>
<div class="**rounded-tr-lg** ..."></div>
<div class="**rounded-br-lg** ..."></div>
<div class="**rounded-bl-lg** ..."></div>
```

## Responsive

To control the border radius of an element at a specific breakpoint, add a `{screen}:` prefix to any existing border radius utility. For example, use `md:rounded-lg` to apply the `rounded-lg` utility at only medium screen sizes and above.

```html
<div class="rounded **md:rounded-lg** ...">
  <!-- ... -->
</div>
```

For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.

## Customizing

### Border Radiuses

By default, Tailwind provides five border radius size utilities. You can change, add, or remove these by editing the `theme.borderRadius` section of your Tailwind config.

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      borderRadius: {
        'none': '0',
-       'sm': '0.125rem',
-       DEFAULT: '0.25rem',
+       DEFAULT: '4px',
-       'md': '0.375rem',
-       'lg': '0.5rem',
-       'full': '9999px',
+       'large': '12px',
      }
    }
  }
```

### Variants

<Variants plugin="borderRadius" />

### Disabling

<Disabling plugin="borderRadius" />
